<template>
	<div class='_MenuBox' @click.stop>
		<ul>
			<li class='_MenuBox_list' @click='res(key,index)' v-for='(key,index) in list.name'>{{key}}</li>
		</ul>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				list:''
			}
		},
		props:['listN'],
		mounted:function(){
			this.list=this.listN;
		},
		methods:{
			res:function(val,index){
				let data={val:val,id:this.list.id[index]};
				this.$emit('menuName',data)
			},
		}
	}
</script>
<style>
	._MenuBox{
		width: 100%;
	}
	._MenuBox>ul{
		width: 100%;
		padding:0px;
		margin:0px;
		background-color: #122038;
	}
	._MenuBox_list{
		cursor: pointer;
	}
	._MenuBox_list:hover{
		background-color: #28446c;
		box-shadow:2px 2px 2px black;
	}
</style>